<template>
  <div>
    <Header @show="showDialog" :total="totalCount"></Header>
    <List @transmit="showTotal" ref="list"></List>
    <Dialog
      v-if="isVisible"
      :visible="isVisible"
      ref="ref"
      @close="closeDialog"
    ></Dialog>
  </div>
</template>

<script>
import Header from "./components/header.vue";
import List from "./components/list.vue";
import Dialog from "./components/dialog.vue";
export default {
  components: {
    Header,
    List,
    Dialog,
  },
  data() {
    return {
      isVisible: false,
      totalCount: null,
    };
  },
  methods: {
    showDialog() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.$refs.ref.openDialog();
      });
    },
    closeDialog() {
      this.isVisible = false;
      this.$refs.list.getAxios();
    },
    showTotal(number) {
      // console.log(number);
      this.totalCount = number;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>